<template>
    <div class="iphonPass">
        <div class="qrcode">
            <svg class="icon" aria-hidden="true" @click="changeLoginto">
                <use xlink:href="#icon-diannaojiaobiao"></use>
            </svg>
        </div>
        <div class="title">短信登录</div>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
            <el-form-item label="手机号" prop="iphonNum">
                <el-input v-model="ruleForm.iphonNum" class='ipt3' @keydown.enter="phoneVerification" maxlength="11" />
                <div class="validateImg" @click="phoneVerification">{{ hintMsg }}</div>
            </el-form-item>
            <el-form-item label="验证码" prop="validateCaptcha2">
                <el-input v-model="ruleForm.validateCaptcha2" type="text" autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script  setup>
import { reactive, ref, watchEffect, onBeforeUnmount, onUnmounted } from 'vue'
import { rules, useLoginState } from '../methods/iphon'
import { useRouter } from 'vue-router'
import { useLogin } from '../store/cart'
import { storeToRefs } from 'pinia'
import { smsApi } from '../api'
import * as api from '../api/index'
import { ElMessage } from 'element-plus'
import { ElLoading } from 'element-plus'
let changeLogin = useLogin()
let { msg } = storeToRefs(changeLogin)

let changeLoginto = function () {
    changeLogin.$patch((state) => {
        state.msg = true
    })
}


const ruleFormRef = ref()

const ruleForm = reactive({
    iphonNum: '',
    validateCaptcha2: '',
})
let useRouters = useRouter()
let loadingFrame= null
//执行正则验证成功后的代码
let validateVictory = async () => {
    // console.log('验证成功');
    //验证手机验证码是否正确  
    loadingFrame = ElLoading.service({
        lock: true,
        text: '正在加载中...',
        background: 'rgba(0,0,0,0.4)'
    })  
    try {
        let res = await api.smsApi(ruleForm.validateCaptcha2)
        // console.log(res);
        sessionStorage.setItem('qf-token', res.data.token)
        useRouters.push('/')
    }catch(e){
    }
}
//执行正则验证失败后的代码
let validateDefeat = () => {
    console.log('验证失败');
}
let submitForm = useLoginState(validateVictory, validateDefeat)

let times = 'null'
//页面上显示的信息
let hintMsg = ref('获取手机验证码')
//存储按钮的执行状态
let isclick = false
// 获取手机验证码方法
let phoneVerification = async () => {
    if (!isclick) {
        try {
            //发起请求，获取手机验证码
            let res = await api.getSmsCode(ruleForm.iphonNum)
            ElMessage({
                message: res.data.msg,
                type: 'success',
            })
            timeDown(10, '秒后重新发送', hintMsg.value, () => {
                isclick = false
            })

        } catch (e) {
            ElMessage({
                message: e,
                type: 'error',
            })
            return
        }
    }
    isclick = true
}

//封装验证码倒计时方法    
/**
 * @param {Number} time 倒计时开始的时间 
 * @param {String} msg 点击后显示的信息 
 * @param {String} old 倒计时结束后显示的信息 
 * @param {Funstion} cb 回调函数，在倒计时结束后,使按钮的开关打开 
 */
let timeDown = (time, msg, old, cb) => {
    hintMsg.value = (time + '').padStart(2, 0) + msg
    let count = time
    times = setInterval(() => {
        count--
        hintMsg.value = (count + '').padStart(2, 0) + msg
        // console.log(count);
        if (count <= 0) {
            hintMsg.value = old
            clearInterval(times)
            if (cb) {
                cb()
            }
        }
    }, 1000);
}
onBeforeUnmount(() => {
    clearInterval(times)
})
onUnmounted(()=>{
    loadingFrame.close()

})
</script>
  